<template>
  <div class="rule-container">
    <el-dialog
      :visible.sync="dialog"
      :close-on-click-modal="false"
      width="780px"
      top="10px"
      :title="titleContext"
      @close="doClose"
    >
      <el-container>
        <div style="padding-top:30px">
          <el-form ref="ruleForm" :model="rule" :rules="rules" :inline="true" size="mini" label-width="130px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="规则业务类:" required prop="businessTypeIds">
                  <el-select v-model="rule.businessTypeIds" placeholder="可以多选" multiple style="width: 200px;" size="mini">
                    <el-option v-for="item in parent.ruleApplyTypes" :key="item.value" :label="item.name" :value="item.value" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="表单名称:" required prop="sheetVariableName">
                  <el-select v-model="rule.sheetVariableName" placeholder="请选择" filterable style="width: 200px;">
                    <el-option v-for="item in parent.sheetNames" :key="item.value" :label="item.name" :value="item.value" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="Excel列号:" required prop="columnIndex">
                  <el-input v-model="rule.columnIndex" placeholder="请选择" disabled style="width: 200px;" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="Excel列名:" required prop="columnName">
                  <el-input v-model="rule.columnName" placeholder="请选择" disabled style="width: 140px;" />
                  <el-button type="primary" @click="selectSheetColumn">选择</el-button>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="生效日期:" required prop="effectiveDate">
                  <el-date-picker v-model="rule.effectiveDate" type="date" format="MM/dd/yyyy" style="width: 200px;" placeholder="选择日期" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="失效日期:" required prop="expirationDate">
                  <el-date-picker v-model="rule.expirationDate" type="date" format="MM/dd/yyyy" style="width: 200px;" placeholder="选择日期" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="实现方式:" required prop="implType">
                  <!--<el-radio-group v-model="rule.implType" style="width: 200px;">
                    <el-radio v-for="item in getSelector().implTypes" :key="item.value" :label="item.value">{{ item.name }}</el-radio>
                    <el-button v-if="rule.implType === 1 || rule.implType === 2" type="text" icon="el-icon-circle-close" @click="clearImplType" />
                  </el-radio-group>-->
                  <el-select v-model="rule.implType" style="width: 200px;">
                    <el-option v-for="item in getSelector().implTypes" :key="item.value" :label="item.name" :value="item.value" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="规则状态:" required prop="ruleStatus">
                  <el-select v-model="rule.ruleStatus" style="width: 200px;">
                    <el-option v-for="item in getSelector().ruleStatuses" :key="item.value" :label="item.name" :value="item.value" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="二次校验:" required prop="secondCheck">
                  <el-radio-group v-model="rule.secondCheck" style="width: 200px;">
                    <el-radio v-for="secondCheck in getSelector().secondChecks" :key="secondCheck.value" :label="secondCheck.value">{{ secondCheck.name }}</el-radio>
                    <el-button v-if="rule.secondCheck === 1 || rule.secondCheck === 0" type="text" icon="el-icon-circle-close" @click="clearSecondCheck" />
                  </el-radio-group>
                  <!--<el-select v-model="rule.secondCheck" style="width: 200px;">
                    <el-option v-for="item in getSelector().secondChecks" :key="item.value" :label="item.name" :value="item.value" />
                  </el-select>-->
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="规则描述:" required>
                  <el-input v-model="rule.ruleDesc" type="textarea" :rows="15" placeholder="请输入内容" style="width: 540px;" clearable />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="备注:">
                  <el-input v-model="rule.remark" type="textarea" :rows="1" placeholder="请输入内容" style="width: 540px;" clearable />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-container>
      <el-row :gutter="20">
        <el-col :span="12"><div style="padding-top:5px;text-align:right;"><el-button type="primary" size="small" round @click="doSave()">保存</el-button></div></el-col>
        <el-col :span="12"><div style="padding-top:5px"><el-button type="primary" size="small" round @click="doClose()">取消</el-button></div></el-col>
      </el-row>
      <sheetColumnList ref="sheetColumnList" :parent="parent" @setSheetColumn="setSheetColumn" />
    </el-dialog>
  </div>
</template>

<script>
import { addRuleMaintenance, modifyRuleMaintenance, findByRuleId } from '@/api/rule-maintenance'
import { Message } from 'element-ui'
import { getSelector, emptyRuleDefinition } from './js/edit'
import sheetColumnList from '@/views/rules/rule3/sheetColumnList'
import { Validate } from './js/validate'
import { Rule } from './js/rule'

export default {
  components: {
    sheetColumnList
  },
  props: {
    parent: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      validate: new Validate(this),
      ruleValidate: new Rule(this),
      currentObject: this,
      dialog: false,
      loading: false,
      titleContext: null,
      rule: this.emptyRuleDefinition(),
      rules: {}
    }
  },
  computed: {
    showId: function() {
      return this.rule.id !== null && this.rule.id !== ''
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initRules()
    })
  },
  methods: {
    emptyRuleDefinition,
    getSelector,
    selectSheetColumn() {
      this.$refs.ruleForm.validateField('sheetVariableName', err => {
        if (!err) {
          const sheetColumnList = this.$refs.sheetColumnList
          sheetColumnList.sheetColumnDialogTitle = '表单列名选择'
          sheetColumnList.dialog = true
          sheetColumnList.callbackMethod = 'setSheetColumn'
          sheetColumnList.sheetVariableName = this.rule.sheetVariableName
        }
      })
    },
    setSheetColumn(val) {
      if (!val) {
        this.rule.columnName = ''
        return
      }
      this.rule.columnIndex = val.columnIndex
      this.rule.columnName = val.columnName
    },
    clearSecondCheck() {
      this.rule.secondCheck = null
    },
    // 刷新
    reflesh() {
      var self = this
      findByRuleId(this.rule.id).then((res) => {
        if (res) {
          self.rule = res.result
          self.isReflesh = false
        }
      }, err => {
        console.log(err)
      })
    },
    // 关闭
    doClose: function() {
      this.rule = this.emptyRuleDefinition()
      this.dialog = false
    },
    // 保存
    doSave: function() {
      var self = this
      self.loading = true
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.$confirm('是否保存信息?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            if (!self.rule.id) { // 新增
              self.loading = true
              addRuleMaintenance(self.rule).then(res => {
                Message({
                  message: res.result,
                  type: 'success',
                  duration: 2 * 1000
                })
                self.dialog = false
                self.loading = false
                self.parent.toQuery()
              }, err => {
                console.log(err)
                self.loading = false
              })
            } else { // 修改
              self.loading = true
              modifyRuleMaintenance(self.rule).then(res => {
                Message({
                  message: res.result,
                  type: 'success',
                  duration: 2 * 1000
                })
                self.dialog = false
                self.parent.toQuery()
              }, err => {
                console.log(err)
                self.loading = false
                if (err.code === '10003') {
                  this.$confirm(err.message + '，是否刷新？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                  }).then(() => {
                    self.reflesh()
                  })
                }
              })
            }
          })
        } else {
          Message({
            message: '校验失败',
            type: 'warning',
            duration: 2 * 1000
          })
          self.loading = false
        }
      })
    },
    // 初始化校验规则
    initRules() {
      for (var key in this.ruleValidate) {
        if (typeof (this.ruleValidate[key]) === 'function') {
          this.ruleValidate[key]()
        }
      }
    }
  }
}
</script>
<style scoped>
  .el-row {
    margin-bottom: 5px;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .rule-container .el-form-item--small.el-form-item {
    margin-bottom: 15px
  }
  .rule-container .el-form-item--mini.el-form-item {
    margin-bottom: 15px
  }
  .rule-container >>> .el-divider.el-divider--horizontal{
    margin: 10px 0;
  }
  .rule-container >>> .el-dialog__body {
    padding: 0px 20px 1px 20px;
  }
</style>
